<script lang="ts" setup>
import { NDivider, NTabPane, NTabs } from "naive-ui";
import { useDesignStore } from "@/stores/module/design";
import { toRefs } from "vue";
import { localeOptions } from "@/locales/index";
import { useI18n } from "@/hooks/useI18n";

const { t } = useI18n();

const { setLangMode, langMode } = toRefs(useDesignStore());
</script>

<template>
  <NDivider> {{ t("design.languageMode") }} </NDivider>
  <NTabs type="segment" v-model:value="langMode" animated :on-update:value="setLangMode">
    <NTabPane v-for="item in localeOptions" :name="item.value" :tab="item.label" />
  </NTabs>
</template>
